<template>
  <div>
    <el-row>
      <el-col :span="10" style="height: 60px;">
        <el-image :src="getImage('logo.png')" class="logo"></el-image>
      </el-col>

      <el-col :span="4" :offset="10" class="user-info">
        <el-dropdown class="profile-container" trigger="click">
          <span class="cursor-pointer">
            <el-avatar class="avatar" v-if="userStore.userInfo.avatarPath"
              :src="toAddressable(userStore.userInfo.avatarPath)">
            </el-avatar>
            <el-avatar class="avatar" v-else :src="getImage('user.png')"></el-avatar>
            <el-icon class="arrow">
              <arrow-down></arrow-down>
            </el-icon>
          </span>

          <template v-slot:dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="openUpdateProfileDialog(userStore.userInfo.id)">修改个人信息</el-dropdown-item>
              <el-dropdown-item @click="openUpdatePwd">修改密码</el-dropdown-item>

              <div v-permission="'/user/queryById,/user/modifyById,/storage/uploadFile'">
                <el-dropdown-item @click="openUpdateProfileDialog(userStore.userInfo.id)">修改个人信息</el-dropdown-item>
              </div>

              <div v-permission="'/user/updatePwd'">
                <el-dropdown-item @click="openUpdatePwd">修改密码</el-dropdown-item>
              </div>

              <el-dropdown-item @click="handleLogout">退出</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-col>
    </el-row>

    <!-- 修改个人信息对话框 -->
    <el-dialog title="修改个人信息" v-model="updateProfileDiaVisible" @close="handleUpdateProfileDiaCancel">
      <el-form ref="updateProfileForm" :model="updateProfileFormData" :rules="updateProfileRules" label-width="120px">

        <el-form-item label="用户编号:" prop="id">
          <el-input v-model="updateProfileFormData.id" disabled></el-input>
        </el-form-item>

        <el-form-item label="用户名:" prop="username">
          <el-input v-model="updateProfileFormData.username" disabled></el-input>
        </el-form-item>

        <el-form-item label="照片:" prop="avatarPath">
          <el-upload :auto-upload="true" :action="uploadCfg.uploadUrl" :show-file-list="true" list-type="picture-card"
            :on-success="handleSuccess" :on-remove="handleRemove" :limit="1" :on-exceed="handleExceed"
            :file-list="uploadInfo.fileList" :headers="uploadCfg.headers">
            <template v-slot:trigger>
              <el-icon>
                <Plus />
              </el-icon>
            </template>
          </el-upload>
        </el-form-item>

        <el-form-item label="真实姓名:" prop="realName">
          <el-input v-model="updateProfileFormData.realName"></el-input>
        </el-form-item>

        <el-form-item label="性别:" prop="sex">
          <el-radio v-model="updateProfileFormData.sex" label="M">男</el-radio>
          <el-radio v-model="updateProfileFormData.sex" label="F">女</el-radio>
        </el-form-item>

        <div slot="footer" class="dialog-footer">
          <el-button @click="handleUpdateProfileDiaCancel()">取消</el-button>
          <el-button type="primary" @click="updateProfile()">确定</el-button>
        </div>

      </el-form>

    </el-dialog>

    <!-- 修改密码对话框 -->
    <el-dialog title="修改密码" v-model="updatePwdDiaVisible" @close="handleUpdatePwdDiaCancel()">

      <el-form ref="updatePwdForm" :model="updatePwdFormData" :rules="updatePwdRules" label-width="120px">

        <el-form-item label="原始密码" prop="originalPwd">
          <el-input v-model="updatePwdFormData.originalPwd" type="password" placeholder="请输入原始密码"
            show-password></el-input>
        </el-form-item>

        <el-form-item label="新密码密码" prop="newPwd">
          <el-input v-model="updatePwdFormData.newPwd" type="password" placeholder="请输入新密码" show-password></el-input>
        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="handleUpdatePwdDiaCancel()">取消</el-button>
        <el-button type="primary" @click="updatePwd()">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script setup name='NavHeader' lang='ts'>
import { getImage } from '@/utils/assestsImageUtil.ts';
import { useUserStore } from '@/store/useUserStore';
import { useTabStore } from '@/store/useTabStore'
import { useResource } from '@/hooks/useResource'
import { useUpload } from '@/hooks/useUpload'
import { clearAll } from '@/utils/storageUtil';
import { useRouter } from 'vue-router';
import { ref, reactive } from 'vue';
import { ElMessage, type UploadFile, type UploadFiles, type UploadUserFile } from 'element-plus';
import { modifyByIdApi, modifyPwdApi, queryByIdApi, logoutApi } from '@/api/userApi';

let updateProfileForm = ref()
let updatePwdForm = ref()
// 控制对话框是否可见
let updateProfileDiaVisible = ref(false)
let updatePwdDiaVisible = ref(false)
let userStore = useUserStore()
let tabStore = useTabStore()
let updateProfileFormData = reactive({
  id: '',
  username: '',
  realName: '',
  sex: '',
  avatarPath: ''
})
let updatePwdFormData = reactive({
  id: '',
  originalPwd: '',
  newPwd: '',
})
let updateProfileRules = reactive({
  realName: [
    { required: true, message: "请输入姓名", trigger: "blur" },
  ],
  sex: [
    { required: true, message: "请选择性别", trigger: "blur" },
  ]
})
let updatePwdRules = reactive({
  originalPwd: [
    { required: true, message: "请输入原始密码", trigger: "blur" },
  ],
  newPwd: [
    { required: true, message: "请输入新密码", trigger: "blur" },
  ]
})

// 上传文件fileList
let uploadInfo = reactive<{
  fileList: UploadUserFile[]
}>({ fileList: [] })

let router = useRouter()
let { toAddressable } = useResource()
let { handleExceed, uploadCfg } = useUpload()

// 处理下拉框点击
function openUpdateProfileDialog(id: string) {
  // 查询用户信息回显
  queryByIdApi(id).then(result => {
    Object.assign(updateProfileFormData, result.data)
    // 设置图片
    let addressablePath = toAddressable(result.data.avatarPath)
    if (addressablePath) {
      uploadInfo.fileList.push({ url: addressablePath, name: '' })
    }
  })
  updateProfileDiaVisible.value = true
}
function handleLogout() {
  logoutApi().then(result => {
    // 退出登录
    clearAll()
    // 重置所有pinia的状态,避免刷新前在app中又存到storage中了
    userStore.resetAll()
    tabStore.resetAll()
    // 刷新当前页面相当于清空了pinia中的状态数据
    window.location.reload()
  })
}
function openUpdatePwd() {
  // 设置要更新的用户id
  updatePwdFormData.id = userStore.userInfo.id
  updatePwdDiaVisible.value = true
}

// 修改个人信息对话框关闭事件回调
function handleUpdateProfileDiaCancel() {
  uploadInfo.fileList = []
  updateProfileForm.value.resetFields()
  updateProfileDiaVisible.value = false
}
// 修改密码对话框关闭事件回调
function handleUpdatePwdDiaCancel() {
  updatePwdForm.value.resetFields()
  updatePwdDiaVisible.value = false
}
// 提交修改个人信息
function updateProfile() {
  updateProfileForm.value.validate((valid: boolean) => {
    if (!valid) return
    modifyByIdApi(updateProfileFormData).then(result => {
      ElMessage({ "message": result.data, "type": "success" })
      uploadInfo.fileList = []
      // 在重置之前更新,不然重置了就没有值了
      userStore.$patch((state) => {
        // 把最新的头像更新到pinia的store中
        state.userInfo.avatarPath = updateProfileFormData.avatarPath
      })
      updateProfileForm.value.resetFields()
      updateProfileDiaVisible.value = false
    })
  })
}
// 提交修改密码
function updatePwd() {
  updatePwdForm.value.validate((valid: boolean) => {
    if (!valid) return
    modifyPwdApi(updatePwdFormData).then(result => {
      ElMessage({ "message": result.data, "type": "success" })
      updatePwdForm.value.resetFields()
      updatePwdDiaVisible.value = false
    })
  })
}

/*
response:后端返回的对象,file:当前上传成功的文件对象(结构a),
结构a: name,status,url(blob://),uid,size,response
fileList:包含file在内的所有已经上传成功的文件对象列表,每个file元素都是"结构a"
*/
function handleSuccess(response: any, file: UploadFile, fileList: UploadFiles) {
  if (response.success) {
    uploadInfo.fileList = fileList;
    // 业务逻辑
    updateProfileFormData.avatarPath = response.data
    updateProfileForm.value.validateField('avatarPath');
  } else {
    ElMessage({ message: response.msg, type: "error" });
  }
}
//file:删除的文件(结构a)  fileList:还剩下的文件列表,每个file元素都是"结构a"
function handleRemove(file: UploadFile, fileList: UploadFiles) {
  uploadInfo.fileList = fileList;
  // 业务逻辑
  updateProfileFormData.avatarPath = ''
}
</script>
<style scoped>
.logo {
  height: 100%;
  max-height: 100%;
}

.user-info {
  text-align: right;
  line-height: 60px;
}

.avatar {
  margin-right: 10px;
}

.arrow {
  color: white;
  position: absolute;
  top: 14px;
}

.profile-container {
  position: relative;
  top: 10px;
}
</style>